<template>
  <div class="charts_page_warp">
    <div class="charts_page">
      <div class="charts_content">
        <pk-charts
          ref="pkChart"
          :templateAllList="templateAllList"
          @handelClick="checkChart"
          @changeMode="changeMode" />
      </div>
      <div class="charts_content">
        <customerstatistics-charts
          ref="customersChart"
          :templateAllList="templateAllList"
          @handelClick="checkChart"
          @changeMode="changeMode" />
      </div>
    </div>
    <div class="charts_page">
      <div class="charts_content">
        <channel-charts
          ref="channelChart"
          :templateAllList="templateAllList"
          @handelClick="checkChart"
          @changeMode="changeMode" />
      </div>
      <div class="charts_content">
        <sales-charts
          ref="salesChart"
          :templateAllList="templateAllList"
          @handelClick="checkChart"
          @changeMode="changeMode" />
      </div>
    </div>
  </div>
</template>

<script>
  import pkCharts from './component/pkCharts.vue'
  import customerstatisticsCharts from './component/customerstatisticsCharts.vue'
  import channelCharts from './component/channelCharts.vue'
  import salesCharts from './component/salesCharts.vue'
  import dailyApi from '@/biz/buildingHome/daily'
  export default {
    components: {
      pkCharts,
      customerstatisticsCharts,
      channelCharts,
      salesCharts
    },
    data() {
      return {
        templateAllList: null
      }
    },
    methods: {
      checkChart(data) {
        let actionType = {
          1: 'chart_pk',
          2: 'chart_customer',
          3: 'chart_channel',
          4: 'chart_sale'
        }
        if (data.type != -1) {
          dailyApi.logGenerate({ actionType: actionType[data.type] })
        }
        this.$router.push({
          name: 'dailyChart',
          query: {
            type: data.type
          }
        })
      },
      changeMode(val) {
        this.$emit('changeMode', val)
      },
      //获取案场日报模板
      getTemplate(data) {
        this.loading = true
        dailyApi.getModelList({ buildingId: this.$dt.buildInfo().housesId }).then((res) => {
          this.templateAllList = res
          this.init(this.templateAllList, data)
        })
      },
      init(list, data) {
        this.$refs.pkChart.getinfoData({ ...data })
        // this.$refs.pkChart.findDailyGenerationAllocationHomePage()
        this.$refs.customersChart.getinfoData({ ...data, templateAllList: list })
        this.$refs.channelChart.getinfoData({ ...data, templateAllList: list })
        this.$refs.salesChart.getinfoData({ ...data, templateAllList: list })
      }
    }
  }
</script>
<style lang="scss" scoped>
  .charts_page_warp {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height: 100%;

    .charts_page {
      display: flex;
      justify-content: space-between;

      .charts_content {
        flex: 1;
        margin: 0 10px;
      }
    }
  }
</style>
